<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>档案借阅申请详情</title>
</head>
<style>
.fieldset {
	margin-top: 5px;
	margin-bottom: 0px
}

.layui-legend {
	background-color: #5fb878;
	font-size: 15px !important;
	width: 140px;
}

.layui-form-item {
	margin-bottom: 5px;
	clear: both;
	*zoom: 1;
}

.layui-form-label {
	width: 150px;
}

.scroll-wraper {
	width: 94.65%;
	margin-left: 1.65%;
	background-color: red;
}

.scroll-wraper .scroll-layui-table {
	width: 100%;
	margin: 0 auto;
	background-color: #e01010;
	overflow-x: auto;
	border-right: 1px solid #e6e6e6;
	box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	display: flex;
	flex-direction: row;
}

.scroll-wraper .scroll-layui-table .scroll-layui-table-wraper-left {
	width: 12.75%;
	overflow-x: hidden;
	border-right: 1px solid #e6e6e6;
	box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	background-color: blue;
}

.scroll-wraper .scroll-layui-table .scroll-layui-table-wraper-left .layui-table
	{
	width: 400px;
}

.scroll-wraper .scroll-layui-table .scroll-layui-table-wraper-right {
	width: 87.25%;
	background-color: yellow;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
}

.scroll-wraper .scroll-layui-table .scroll-layui-table-wraper-right .scroll-layui-table-content
	{
	width: 3200px;
	display: block;
	background-color: #bbbbbb;
	position: absolute;
	left: 0px;
	top: 0px;
}

.scroll-layui-table .layui-table {
	margin: 0px;
}
</style>
<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-card-body">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<ul class="layui-tab-title">
						<li lay-id="0" class="layui-this"><B>表单信息</B></li>
						<li lay-id="1"><B>审批信息</B></li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<div style="padding-top: 15px;">&nbsp;</div>
							<form class="layui-form" id="addInfo_form">

								<fieldset class="layui-elem-field layui-field-title fieldset"
									id="baseInfo">
									<legend class="layui-btn layui-legend"
										style="text-align: left; cursor: default;">档案借阅申请 ></legend>
									<div style="margin-top: 20px">
										<div class="layui-form-item">
											<div class="layui-inline">
												<label class="layui-form-label">申请公司</label>
												<div class="layui-input-inline">
													<input type="text" value="${borrowRecordVo.orgName}"
														style="border: 0px;" readonly="readonly"
														class="layui-input">
												</div>
											</div>
											<div class="layui-inline">
												<label class="layui-form-label">申请部门</label>
												<div class="layui-input-inline">
													<input type="text" value="${borrowRecordVo.deptName}"
														style="border: 0px;" readonly="readonly"
														class="layui-input">
												</div>
											</div>
											<div class="layui-inline">
												<label class="layui-form-label">申请人</label>
												<div class="layui-input-inline">
													<input type="text" name="staffName" value="${borrowRecordVo.staffName}"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
												</div>
											</div>
										</div>
										<div class="layui-form-item">
											<div class="layui-inline">
												<label class="layui-form-label">借阅开始日期</label>
												<div class="layui-input-inline">
													<input type="text" value="<fmt:formatDate value="${borrowRecordVo.borrowStartDate}" pattern="yyyy-MM-dd"/>"
														style="border: 0px;" name="unname" readonly="readonly"
														class="layui-input">
												</div>
											</div>
											<div class="layui-inline">
												<label class="layui-form-label">拟归还日期 </label>
												<div class="layui-input-inline">
													<input type="text" value="<fmt:formatDate value="${borrowRecordVo.willReturnDate}" pattern="yyyy-MM-dd"/>"
														style="border: 0px;" id="borrowEndDate" name="unname"
														readonly="readonly" class="layui-input">
												</div>
											</div>
											<div class="layui-inline">
												<label class="layui-form-label">借阅方式</label>
												<div class="layui-input-inline">
													<c:if test="${borrowRecordVo.borrowType == '01'}">
														<input type="text" name="staffName" value="查阅"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
													</c:if>
													<c:if test="${borrowRecordVo.borrowType == '02'}">
														<input type="text" name="staffName" value="借阅"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
													</c:if>
													<c:if test="${borrowRecordVo.borrowType == '03'}">
														<input type="text" name="staffName" value="电子版"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
													</c:if>
													<c:if test="${borrowRecordVo.borrowType == '04'}">
														<input type="text" name="staffName" value="复印件"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
													</c:if>
												</div>
											</div>
										</div>
										<div class="layui-form-item">
											<div class="layui-inline">
												<label class="layui-form-label">档案密级程度</label>
												<div class="layui-input-inline">
													<c:if test="${borrowRecordVo.secretLevel == '01'}">
														<input type="text" name="staffName" value="普通"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
													</c:if>
													<c:if test="${borrowRecordVo.secretLevel == '02'}">
														<input type="text" name="staffName" value="秘密"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
													</c:if>
													<c:if test="${borrowRecordVo.secretLevel == '03'}">
														<input type="text" name="staffName" value="机密"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
													</c:if>
												</div>
											</div>
										</div>
										<div class="layui-form-item">
											<div class="layui-inline">
												<label class="layui-form-label">借阅申请事由</label>
												<div class="layui-input-inline">
													<textarea class="layui-textarea" style="width: 520px; height: 90px;" name="applyReason" readonly="readonly">${borrowRecordVo.applyReason}
													</textarea>
												</div>
											</div>
										</div>
										<div class="layui-form-item">
											<div class="layui-inline">
												<label class="layui-form-label">档案来源</label>
												<div class="layui-input-inline">
													<c:if test="${borrowRecordVo.fromType == '01'}">
														<input type="text" name="staffName" value="建投总部"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
													</c:if>
													<c:if test="${borrowRecordVo.fromType == '02'}">
														<input type="text" name="staffName" value="其他项目公司"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
													</c:if>
													<c:if test="${borrowRecordVo.fromType == '03'}">
														<input type="text" name="staffName" value="本项目公司"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
													</c:if>
													<c:if test="${borrowRecordVo.fromType == '04'}">
														<input type="text" name="staffName" value="本部门"
														readonly="readonly" style="border: 0px" autocomplete="off"
														class="layui-input">
													</c:if>
												</div>
											</div>
										</div>
									</div>
								</fieldset>
								<fieldset class="layui-elem-field layui-field-title fieldset">
									<legend class="layui-btn layui-legend"
										style="text-align: left; cursor: default;">档案清单 ></legend>
									<div class="layui-form-item">
										<label class="layui-form-label"></label>
									</div>
									<div class="contract-box" id="borrow-node">
										<div class="contract-money">
											<table class="layui-table">
												<colgroup>
													<col width="90">
													<col width="250">
													<col width="250">
												</colgroup>
												<thead>
													<tr>
														<th style="text-align: center;">序号</th>
														<th style="text-align: center;">档案类型</th>
														<th style="text-align: center;">档案名称</th>
													</tr>
												</thead>
												<tbody>
													<c:forEach items="${borrowRecordVo.borrowRecordLists}" var="borrowRecordList">
									                    <tr>
									                    	<td style="text-align: center;">${borrowRecordList.showIdx }</td>
									                    	<td style="text-align: center;">
									                    		<c:if test="${borrowRecordList.docType == '01'}">
									                    			党群工作
									                    		</c:if>
									                    		<c:if test="${borrowRecordList.docType == '02'}">
									                    			行政管理
									                    		</c:if>
									                    		<c:if test="${borrowRecordList.docType == '03'}">
									                    			经营管理
									                    		</c:if>
									                    		<c:if test="${borrowRecordList.docType == '04'}">
									                    			基本建设
									                    		</c:if>
									                    		<c:if test="${borrowRecordList.docType == '05'}">
									                    			会计档案
									                    		</c:if>
									                    		<c:if test="${borrowRecordList.docType == '06'}">
									                    			人事档案
									                    		</c:if>
									                    		<c:if test="${borrowRecordList.docType == '07'}">
									                    			声像档案
									                    		</c:if>
									                    		<c:if test="${borrowRecordList.docType == '08'}">
									                    			实物档案
									                    		</c:if>
									                    	</td>
									                    	<td style="text-align: center;">${borrowRecordList.docName }</td>
									                    </tr>
													</c:forEach>
												</tbody>
											</table>
										</div>
									</div>
								</fieldset>

							</form>
						</div>


						<!-- 引入公共流程渲染页面   -->
						<%@ include file="../include/flowPublic.jsp"%>

						<!-- 审批时 显示 通过/拒绝按钮   -->
						<c:if test="${'y'==processDealWith}">
							<fieldset class="layui-elem-field layui-field-title fieldset"
								style="text-align: center;">
								<div class="layui-form-item">
									<div class="layui-input-block">
										<input
											class="layui-btn layuiadmin-btn-admin layui-btn-normal "
											style="margin-top: 6px;" type="button"
											data-type="to_pass_submit" id="to_pass_submit" value="审批通过">
										<input
											class="layui-btn layuiadmin-btn-admin layui-btn-primary "
											style="margin-top: 6px;" type="button"
											data-type="to_refuse_submit" id="to_refuse_submit"
											value="审批终止">
									</div>
								</div>
							</fieldset>
						</c:if>

						<!-- 审批意见  -->
						<form class="layui-form" id="flow_process_form"
							style="display: none">
							<input type="hidden" name="state" id="flow_process_form_state" />
							<input type="hidden" name="srcBizSguid"
								value="${modelDetail.id }" /> <input type="hidden"
								name="processId" value="${modelDetail.processId }" />
							<div class="layui-form-item" style="padding-top: 10px">
								<label class="layui-form-label">审批结果</label>
								<div class="layui-input-inline">
									<input type="text" style="border: 0px;" readonly="readonly"
										class="layui-input" id="flow_process_form_state_txt">
								</div>
							</div>
							<div class="layui-form-item" style="padding-top: 10px">
								<label class="layui-form-label">审批意见</label>
								<div class="layui-input-inline">
									<textarea name="dealIdea" placeholder="请输入审批意见"
										lay-verify="required" class="layui-textarea"
										style="width: 475px; height: 145px;"></textarea>
								</div>
							</div>
							<fieldset class="layui-elem-field layui-field-title"
								style="margin-top: 15px;">
								<legend class="layui-btn layui-legend"
									style="text-align: left; cursor: default;">
									附件信息 > <label class="layui-form-label" style="width: 100%;">支持pdf、excel、word、图片资料，可上传多个
									</label>
								</legend>
							</fieldset>
							<div class="layui-form-item" style="margin-top: 10px;">
								<label class="layui-form-label">附件资料</label>
								<div class="layui-input-block">
									<div class="layui-upload">
										<button type="button" class="layui-btn" id="upload-more">上传</button>
										<div class="layui-upload-list" id="upload-more-list"></div>
									</div>
								</div>
							</div>
							<div class="layui-form-item layui-hide">
								<input type="button" lay-submit
									lay-filter="flow_process_from_submit"
									id="flow_process_from_submit" value="确认">
							</div>
						</form>

					</div>
				</div>
			</div>




		</div>
	</div>
	<script>
		//静态资源路径前缀
		var staticPath = '${fileHttpPre}';
		var stateJSON = <infopub:dicJson groupNo="A00010028" />;

		layui
				.config({
					base : '${ctx}/resources/layuiadmin/' //静态资源所在路径
				})
				.extend({
					index : 'lib/index' //主入口模块
				})
				.use(
						[ 'index', 'set', 'upload', 'element', 'laydate' ],
						function() {
							var $ = layui.$, form = layui.form, element = layui.element, laydate = layui.laydate, table = layui.table, upload = layui.upload;

							form.verify({
										CHS : [ /^[\u0391-\uFFE5]+$/, '只能输入汉字' ],
										intNumber : [ /^[1-9]\d*$/, '请输入正确的数字' ],
										floatNumber : [
												/^([-]?)([0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/,
												'请输入正确的数字' ],
										floatAmount : [
												/^([1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/,
												'请输入正确的数字' ]
									});
							var laydate = layui.laydate;
							laydate.render({
								elem : '#applyDate'
							});
							laydate.render({
								elem : '#useDate'
							});
							$('.decimal').on(
									'keyup',
									function() {
										var val = this.value.replace(
												/^(\-)*(\d+)\.(\d\d).*$/,
												'$1$2.$3');
										var val2 = val.replace(/[^0-9.]/g, "");
										this.value = val2;
									});

							element.on('tab(docDemoTabBrief)', function(data) {
							});

							upload.render({
										elem : '#upload-more',
										url : basePath
												+ '/flowProcess/uploadAtt/',
										multiple : true,
										accept : 'file',
										acceptMime : 'application/zip,application/x-rar-compressed,image/jpeg,image/png,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf',
										before : function(obj) { //obj参数包含的信息
											layer.load(); //上传loading
										},
										done : function(res) {
											//如果上传失败
											if (res.code > 0) {
												layer.closeAll('loading'); //关闭loading
												return layer.msg(res.msg, {
													icon : 7
												});
											}
											//上传完毕
											if (res.entity != null
													&& res.entity.length > 0) {
												for ( var i in res.entity) {
													var contractExtAtt = res.entity[i];
													var arr = contractExtAtt
															.split("|");
													var imgSrc = "";
													var suffix = arr[0]
															.substring(
																	arr[0]
																			.lastIndexOf(".") + 1,
																	arr[0].length);
													if (suffix == 'jpg'
															|| suffix == 'png') {
														imgSrc = "${fileHttpPre}/"
																+ arr[2];
													} else {
														imgSrc = "${ctx}/resources/images/"
																+ suffix
																+ ".jpg";
													}
													$('#upload-more-list')
															.append(
																	'<div class="layui-upload-img-div" id="upload_img_'+arr[1]+'"><img src="'+imgSrc+'" title="'+ arr[0] +'" class="layui-upload-img"><div class="mask"><a href="javascript:void(0)" onclick="showImg(\''
																			+ "${fileHttpPre}"
																			+ arr[2]
																			+ '\');">查看</a><a href="javascript:void(0)" onclick="del(\''
																			+ arr[1]
																			+ '\')";>删除</a></div><p>'
																			+ arr[0]
																			+ '</p><input type="hidden" value="'+contractExtAtt+'" id="fileAtt_'+arr[1]+'" name="fileAtts" ></input></div> ');
												}
											}
										},
										allDone : function(obj) { //当文件全部被提交后，才触发
											layer.closeAll('loading'); //关闭loading
										},
										error : function() {
											layer.closeAll('loading'); //关闭loading
											//上传失败
											layer.msg("上传失败，请稍后再试~", {
												icon : 7
											});
										}
									});
							// 按钮事件
							var active = {
								to_pass_submit : function() {
									$('#flow_process_form_state').val("1");
									$('#flow_process_form_state_txt').val(
											"审批通过");
									layer.open({
												type : 1,
												title : '审批通过确认',
												content : $('#flow_process_form'),
												area : layui.admin.screen() < 2 ? [
														'80%', '460px' ]
														: [ '820px', '460px' ],
												btn : [ '确定', '取消' ],
												btnAlign : 'c',
												yes : function(index, layero) {
													var submitID = 'flow_process_from_submit', submit = layero
															.contents()
															.find(
																	'#'
																			+ submitID);
													//监听提交
													form.on('submit('+ submitID+ ')',
																	function(data) {
																		var field = data.field; //获取提交的字段
																		layer.load();
																		//提交 Ajax 成功后，静态更新表格中的数据
																		$.ajax({
																					type : 'post',
																					url : basePath
																							+ "/flowProcess/dealWith",
																					data: $('#flow_process_form').serialize(),
																					success : function(
																							result) {
																						if (result.success) {
																							layer.closeAll('loading'); //关闭loading
																							layer.msg('处理成功~',
																											{
																												icon : 1
																											});
																							//两秒后关闭当前页面
																							setTimeout(
																									function() {
																										// 刷新首页 
																										var iframe = window.parent.layui.admin
																												.tabsBody(
																														0)
																												.find(".layadmin-iframe");
																										iframe[0].contentWindow.location
																												.reload(true);
																										top.layui.admin
																												.closeThisTabs(); // 关闭当前标签页
																									},
																									2000);
																						} else {
																							layer.closeAll('loading'); //关闭loading
																							layer.msg(result.msg,{icon : 7});
																						}
																					}
																				});
																	});
													submit.trigger('click');
												}
											});
								},
								to_refuse_submit : function() {
									$('#flow_process_form_state').val("0");
									$('#flow_process_form_state_txt').val(
											"审批终止");
									layer.open({
												type : 1,
												title : '审批终止确认',
												content : $('#flow_process_form'),
												area : layui.admin.screen() < 2 ? [
														'80%', '460px' ]
														: [ '820px', '460px' ],
												btn : [ '确定', '取消' ],
												btnAlign : 'c',
												yes : function(index, layero) {
													var submitID = 'flow_process_from_submit', submit = layero.contents().find('#'+ submitID);
													//监听提交
													form.on('submit('+ submitID+ ')',
																	function(data) {
																		var field = data.field; //获取提交的字段
																		layer.load();
																		//提交 Ajax 成功后，静态更新表格中的数据
																		$.ajax({
																					type : 'post',
																					url : basePath
																							+ "/flowProcess/dealWith",
																					data: $('#flow_process_form').serialize(),
																					success : function(
																							result) {
																						if (result.success) {
																							layer.closeAll('loading'); //关闭loading
																							layer.msg('处理成功~',{icon : 1});
																							//两秒后关闭当前页面
																							setTimeout(
																									function() {
																										// 刷新首页 
																										var iframe = window.parent.layui.admin
																												.tabsBody(
																														0)
																												.find(
																														".layadmin-iframe");
																										iframe[0].contentWindow.location
																												.reload(true);
																										top.layui.admin
																												.closeThisTabs(); // 关闭当前标签页
																									},
																									2000);
																						} else {
																							layer.closeAll('loading'); //关闭loading
																							layer.msg(result.msg,{icon : 7});
																						}
																					}
																				});
																	});
													submit.trigger('click');
												}
											});
								}
							}
							// data-type事件
							$('.layui-btn.layuiadmin-btn-admin').on(
									'click',
									function() {
										var type = $(this).data('type');
										active[type] ? active[type].call(this)
												: '';
									});

						});

		//删除文件
		function del(index) {
			layui.$("#fileAtt_" + index).remove();
			layui.$("#upload_img_" + index).remove();
		}

		//根据url查看文件
		function showImg(url) {
			var openWin = window.open(url,'','left=410,height=768, width=1024, top=200,  toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
		}
	</script>
</body>
</html>

